export const classNames = {
  badge_cn: {
    box: 'relative inline-block',
    dot: 'absolute z-10 rounded-lg text-white bg-error text-center text-mini py-0 px-1 top-0 right-0 translate-x-1/2 -translate-y-1/2',
    'dot:show': 'inline-block w-2 h-2',
    'dot:hidden': 'py-0 px-1',
    hidden: 'hidden',
  },
  button_cn: {
    box: 'flex items-center relative overflow-hidden whitespace-nowrap outline-none duration-200 transition-shadow transition-colors',
    'box:mini': 'text-mini py-0 px-1 h-6',
    'box:small': 'text-xs py-0 px-2 h-8',
    'box:normal': 'text-sm py-0 px-3 h-10',
    'box:large': 'text-base py-0 px-5 h-12',
    'box:default': 'text-primary-text bg-default border-transparent',
    'box:primary': 'text-white bg-primary border-transparent',
    'box:link': 'text-primary bg-link shadow-none border-transparent',
    'box:ghost': 'text-primary bg-link shadow-none hover:bg-primary-hover border-primary border',
    'box:success': 'text-white bg-success border-transparent',
    'box:warning': 'text-white bg-warning border-transparent',
    'box:error': 'text-white bg-error border-transparent',
    'box:disabled': 'text-disabled-text bg-disabled shadow-none cursor-not-allowed border-transparent',
  },
  cell_cn: {
    box: 'flex items-center py-2 px-3 relative overflow-hidden',
    'box:border-bottom': 'border-b border-split',
    'box:border': 'border border-split',
    'box:border-none': 'border-0',
    'box:card': 'border-b border-split bg-white text-primary-text shadow',
    content: 'flex-1 m-x-10',
    'content:title': 'text-primary-text text-base',
    'content:desc': 'text-desc text-mini',
  },
  checkbox_cn: {
    box: 'flex items-center',
    disabled: 'cursor-not-allowed text-disabled-text',
    value: 'relative w-5 h-5 border border-soild duration-200 transition-colors',
    'value:hover': 'border-split bg-ipt-bg hover:border-ipt-hover focus-within:border-ipt-focus  focus-within:hover:border-ipt-focus',
    'value:disabled': 'bg-disabled border-bdr-disabled',
    'value:checked':
      'border-ipt-focus bg-ipt-focus animate-checked-animate after:border-l-2 after:border-b-2 after:border-white after:absolute after:w-7/10 after:h-2/5 after:translate-x-13/50 after:translate-y-3/5 after:-rotate-45',
    label: 'mx-2.5 text-mini text-ipt-label',
    checkbox: 'absolute z-1 inset-0 w-full h-full opacity-0 pointer-events-none peer',
  },
  collapse_cn: {
    box: 'relative w-full z-0',
    item: 'relative duration-200 transition-colors h-auto',
    'item:disabled': 'bg-disabled text-disabled-text cursor-not-allowed',
    'item:nodisabled': 'cursor-pointer',
    'item:title': 'flex items-center relative outline-none text-title padding-title text-primary-text justify-between',
    'item:border': 'border border-split',
    'item:content': 'overflow-hidden transition-all duration-200',
    'item:content:child': 'text-mini padding-mini text-desc',
  },
  countdown_cn: {
    box: '',
    split: '',
    time: '',
  },
  dateselect_cn: {
    box: 'w-64',
    header: 'flex items-center justify-between py-2 px-3',
    icons: 'flex items-center justify-between',
    icon: 'mx-1 text-desc hover:text-ipt-hover cursor-pointer',
    title: 'text-center text-xs cursor-pointer text-primary-text hover:text-primary-ipt',
    year: 'mr-3',
    month: '',
    content: 'transition-transform duration-300 w-full flex',
    'content:months': '-translate-x-full',
    'content:years': '-translate-x-2/1',
    monthbox: 'min-w-full flex flex-wrap border-t border-split px-3 py-2',
    yearbox: 'min-w-full flex flex-wrap border-t border-split px-3 py-2',
    tablebox: 'min-w-full border-t border-split px-3 py-2',
    ymchild: 'flex-1/3 text-center text-primary-text cursor-pointer',
    text: 'm-1 px-3 py-1 leading-6',
    'text:hover': 'hover:bg-ipt-hover',
    'text:active': 'text-white bg-ipt-focus',
    table: {
      header: 'table-header-group text-base text-primary-text',
      tbody: 'flex-1 overflow-auto',
      'tr:body': '',
      td: 'table-cell text-center py-1',
    },
    day: 'w-6 h-6 mx-1 leading-6 border text-xs',
    'day:show': 'text-primary-text hover:bg-ipt-hover cursor-pointer border-transparent',
    'day:hidden': 'text-desc hover:bg-ipt-hover cursor-pointer border-transparent',
    'day:disabled': 'text-disabled-text bg-disabled cursor-not-allowed border-transparen',
    'day:selected': 'bg-ipt-focus text-white cursor-pointer border-ipt-focus',
    'day:today': 'border-ipt-focus border cursor-pointer',
    footer: 'flex items-center justify-between py-2 px-3 border-t border-split',
  },
  datepicker_cn: {
    title: 'relative',
    range: 'flex items-center justify-center',
    ipt: {},
    picker: {},
    split: 'mx-2',
  },
  dialog_cn: {
    mask: 'fixed left-0 right-0 top-0 bottom-0 z-1000 bg-mask',
    'mask:center': 'flex items-center justify-center',
    box: 'fixed z-1000 bg-white',
    'box:right': 'right-0 top-0 min-w-48 h-full rounded-l-3xl',
    'box:right:apper': 'animate-translate-x-100-0',
    'box:right:disapper': 'animate-translate-x-0-100',
    'box:left': 'left-0 top-0 min-w-48 h-full rounded-r-3xl',
    'box:left:apper': 'animate-translate-x-m100-0',
    'box:left:disapper': 'animate-translate-x-0-m100',
    'box:top': 'min-h-48 w-full top-0 left-0 right-0 rounded-b-3xl',
    'box:top:apper': 'animate-translate-y-m100-0',
    'box:top:disapper': 'animate-translate-y-0-m100',
    'box:bottom': 'min-h-48 w-full bottom-0 left-0 right-0 rounded-t-3xl',
    'box:bottom:apper': 'animate-translate-y-100-0',
    'box:bottom:disapper': 'animate-translate-y-0-100',
    'box:center': 'max-w-80 max-h-64 rounded-lg overflow-hidden left-0 right-0 top-0 bottom-0 m-auto',
    'box:center:apper': 'animate-zoom-0-100',
    'box:center:disapper': 'animate-zoom-100-0',
    body: '',
    header: 'flex items-center',
    'header:inclose': 'justify-between',
    'header:noclose': 'justify-center',
    'close:icon': 'cursor-pointer px-4 py-2 text-close absolute right-0 top-0',
    footer: '',
  },
  drag_cn: {
    box: 'absolute inline-block z-1 touch-none select-none',
    'box:disabled': 'bg-disabled text-disabled-text cursor-not-allowed',
    'box:nodisabled': 'cursor-pointer',
  },
  ellipsis_cn: {
    box: 'relative text-justify before:inline-block before:float-right transition-height duration-200',
    btn: 'float-right clear-both text-ipt-focus cursor-pointer',
  },
  emoipt_cn: {
    box: 'flex items-center',
    input: 'box-content flex-1 p-1 bg-label outline-none border-0 caret-primary select-auto text-xs max-h-12 overflow-y-auto',
    expand: '',
    img: 'inline-block w-4 h-4 mr-px align-top',
  },
  fab_cn: {
    box: 'fixed transition-transform scale-0 duration-200',
    'box:show': 'scale-100 cursor-pointer',
    'box:hidden': 'scale-0 cursor-pointer',
    'box:bottom-right': 'bottom-2.5 right-2.5',
    'box:bottom-left': 'bottom-2.5 left-2.5',
    'box:top-right': 'top-2.5 right-2.5',
    'box:top-left': 'top-2.5 left-2.5',
    content: 'flex items-center justify-center relative w-12 h-12 rounded-full overflow-hidden z-1',
    'content:default': 'bg-default text-primary-text',
    'content:primary': 'bg-primary text-white',
    'content:success': 'bg-success text-white',
    'content:warning': 'bg-warning text-white',
    'content:error': 'bg-error text-white',
    'content:disabled': 'bg-disabled text-disabled-text cursor-not-allowed',
    'content:show': 'shadow-card',
    'content:hidden': 'shadow-none',
    expand: 'absolute flex items-center justify-center transition-opacity transition-transform duration-200',
    'expand:top': 'bottom-full left-0 w-full',
    'expand:top:show': 'opacity-100 translate-y-0',
    'expand:top:hiddle': 'opacity-0 translate-y-1/2',
    'expand:top:dirc': 'flex-col-reverse',
    'expand:bottom': 'top-full left-0 w-full',
    'expand:bottom:show': 'opacity-100 translate-y-0',
    'expand:bottom:hiddle': 'opacity-0 -translate-y-1/2',
    'expand:bottom:dirc': 'flex-col',
    'expand:left': 'right-full top-0 h-full',
    'expand:left:show': 'opacity-100 translate-x-0',
    'expand:left:hiddle': 'opacity-0 translate-x-1/2',
    'expand:left:dirc': 'flex-row-reverse',
    'expand:right': 'left-full top-0 h-full',
    'expand:right:show': 'opacity-100 translate-x-0',
    'expand:right:hiddle': 'opacity-0 -translate-x-1/2',
    'expand:right:dirc': 'flex-row',
  },
  form_cn: {
    box: '',
    item: 'flex flex-1 mb-4',
    label: 'relative flex items-center',
    labeltext: 'w-24 text-justify text-nowrap text-label text-last-justify',
    colon: 'after:content-[":"] after:text-label after:mr-2',
    required: 'before:content-["*"] before:text-error before:absolute before:-left-2',
    control: 'relative w-full',
    'error:def': 'text-mini text-error transition-all duration-300',
    'error:show': 'mt-0 h-4 leading-4 translate-y-0 opacity-100',
    'error:hidden': '-translate-y-1.5 opacity-0',
    'error:offset': '-mb-4',
  },
  flex_cn: {
    box: 'w-full',
    row: 'flex flex-wrap w-full border-l border-b',
    col: 'p-1 border-r border-t text-center text-primary',
  },
  scrollx_cn: {
    box: 'flex flex-1 shrink-0 whitespace-nowrap overflow-hidden relative min-h-10',
    list: 'absolute text-primary-text whitespace-pre',
    animation: 'animate-scroll-x animate-running hover:animate-paused',
    text: 'mr-3',
  },
  iframe_cn: {
    box: 'w-full',
    iframe: 'border-0 m-0 p-0 overflow-hidden',
  },
  img_cn: {
    box: 'bg-no-repeat',
    img: 'block h-full m-auto',
  },
  input_cn: {
    box: 'flex items-center relative transition-colors duration-300',
    'box:outlined:normal': 'border-split cursor-text bg-ipt-bg text-ipt-color hover:border-ipt-hover focus-within:border-ipt-focus  focus-within:hover:border-ipt-focus',
    'box:outlined:error': 'border-error cursor-text bg-ipt-bg text-error',
    'box:outlined:bordered': 'border border-solid',
    'box:outlined:nobordered': 'border-0',
    disabled: 'bg-disabled text-disabled-text cursor-not-allowed',
    'box:input:large': 'py-2 px-4 h-12 text-lg',
    'box:input:normal': 'py-1.5 px-3 h-10 text-base',
    'box:input:small': 'py-1.5 px-3 h-8 text-sm',
    'box:input:mini': 'py-0 px-2 h-6 text-xs',
    'box:textarea:large': 'text-lg',
    'box:textarea:normal': 'text-base',
    'box:textarea:small': 'text-sm',
    'box:textarea:mini': 'text-xs',
    'textarea:large': 'py-2 px-4 min-h-12',
    'textarea:normal': 'py-1.5 px-3 min-h-10',
    'textarea:small': 'py-1.5 px-3 min-h-8',
    'textarea:mini': 'py-0 px-2 min-h-6',
    standard: 'absolute z-1 w-full h-px bottom-0 right-0 transition-colors duration-300',
    'standard:normal': 'bg-split peer-focus:bg-ipt-focus peer-focus:h-px peer-focus:animate-standard-line',
    'standard:error': 'bg-error',
    input: 'border-0 bg-transparent w-full outline-none placeholder:text-pld-color placeholder:text-pld-font peer',
    label: 'absolute pointer-events-none transition-all duration-100',
    'label:textarea:large': 'top-2 left-4',
    'label:textarea:normal': 'top-1.5 left-3',
    'label:textarea:small': 'top-1.5 left-3',
    'label:textarea:mini': 'top-0 left-2',
    'label:active': '-translate-x-1/5 -translate-y-17/20 scale-75 bg-ipt-bg text-ipt-color peer-focus:text-ipt-focus',
    'label:noactive': 'translate-x-0 translate-y-0 scale-100 bg-transparent text-ipt-label',
    maxlength: 'ml-2',
    currentlength: 'text-ipt-focus',
    clear: 'inline-block text-clear ml-2 cursor-pointer',
    clearfixed: 'absolute right-0 top-0 mr-2 mt-2',
    'password:icon': 'text-ipt-color hover:text-ipt-hover cursor-pointer',
  },
  link_cn: {
    box: 'text-xs',
    'box:default': 'text-primary-text cursor-pointer',
    'box:primary': 'text-primary cursor-pointer',
    'box:success': 'text-success cursor-pointer',
    'box:warning': 'text-warning cursor-pointer',
    'box:error': 'text-error cursor-pointer',
    'box:disabled': 'text-disabled-text cursor-not-allowed',
    'box:underline:none': 'no-underline',
    'box:underline:hover': 'no-underline hover:underline',
    'box:underline:always': 'underline',
  },
  loading_cn: {
    box: 'flex items-center',
    'box:spinner': 'relative inline-block w-6 h-6 max-h-full max-w-full align-middle steps-12 animate-rotate-0-360',
    'child:cube': 'w-2 h-2 bg-primary m-0.5 rounded-none animate-cube cube',
    'child:circle': 'w-2 h-2 bg-primary m-0.5 rounded-full animate-opacity-100-0 circle',
    'child:wave': 'w-1 h-2 bg-primary m-0.5 rounded-none animate-scale-y-1-2 wave',
    'child:spinner': 'absolute top-0 left-0 w-full h-full text-primary before:block before:w-0.5 before:h-1/4 before:bg-current before:rounded-2/5 before:mx-auto before:my-0 spinner',
  },
  message_cn: {
    box: 'flex items-center text-center mb-5 bg-white px-4 py-3 shadow-none text-primary-text text-sm animate-move-down-to-up',
    mask: 'w-screen h-screen fixed top-0 left-0 flex flex-col items-center py-5 z-1000 pointer-events-none',
    'icon:success': 'text-success mr-2',
    'icon:warn': 'text-warning mr-2',
    'icon:error': 'text-error mr-2',
  },
  numberkeyboard_cn: {
    box: 'w-full flex flex-wrap bg-disabled',
    li: 'w-1/3 border-split flex items-center justify-center h-12',
    linumber: 'border-b bg-white text-lg',
    licenter: 'border-x bg-white text-lg',
    clear: '',
  },
  pagination_cn: {
    box: 'flex items-center list-none select-none',
    disabled: 'bg-disabled text-disabled-text cursor-not-allowed shadow-none border-bdr-disabled',
    prev: '',
    previcon: '',
    prevmore: 'cursor-pointer',
    prevmoreicon: '',
    moreicon: 'relative mr-4 text-ipt-focus',
    moreiconmask: 'absolute inset-0 block m-auto text-desc bg-white text-center opacity-100 transition-all duration-200 hover:opacity-0 tracking-widest',
    next: '',
    nexticon: '',
    nextmore: 'cursor-pointer',
    nextmoreicon: '',
    page: 'flex items-center justify-center bg-transparent border mr-4 last:m-0',
    'page:active': 'text-ipt-focus border-ipt-focus',
    'page:hover': 'cursor-pointer text-primary-text border-split hover:border-ipt-hover',
    'page:small': 'min-w-8 min-h-8 w-8 h-8',
    'page:mini': 'min-w-6 min-h-6 w-6 h-6',
    pagesize: 'max-w-28',
    sizeselect: {},
    jumpinput: {
      box: 'flex items-center relative transition-colors duration-300 mx-4',
    },
    pagejump: 'flex items-center text-nowrap break-keep whitespace-nowrap ml-4 max-w-32',
  },
  passwordinput_cn: {
    box: 'flex items-center relative',
    li: 'w-8 h-8 bg-label text-center ml-2 first:ml-0 rounded relative flex items-center justify-center',
    mask: 'w-2 h-2 absolute rounded-full bg-primary left-1/2 top-1/2 -ml-1 -mt-1',
    cursor: 'h-1/2 w-px bg-primary animate-cursor-flicker',
  },
  picker_cn: {
    box: 'w-full bg-white transition-colors duration-300',
    input: {
      box: 'flex items-center relative transition-border-bg-color duration-300',
      input: 'border-0 bg-transparent w-full outline-none placeholder:text-pld-color placeholder:text-pld-font peer truncate',
    },
    suffix: 'text-icon text-base transition-all duration-300',
    'suffix:expand': 'rotate-180',
    'suffix:retract': 'rotate-0',
    header: 'flex items-center justify-between text-sm text-primary-text mb-2.5 bg-transparent',
    cancel: 'cursor-pointer px-3 py-1',
    confirm: 'text-primary px-3 py-1 cursor-pointer',
    content: 'flex items-center justify-between relative text-sm text-primary-text cursor-grab h-60',
    mask: 'absolute pointer-events-none top-0 left-0 w-full h-full bg-no-repeat bg-white-gray-1 bg-top-bottom',
    picked: 'absolute w-full left-0 border-y border-split pointer-events-none z-1 transition-border duration-300',
    column: 'flex-1 text-center overflow-hidden h-full',
    'column:active': 'text-ipt-focus',
    scroll: 'pb-25',
    item: 'px-1 truncate',
  },
  progress_cn: {
    box: 'flex items-center justify-between',
    linear: 'rounded w-full h-2 bg-split flex-1',
    circle: '',
    'linear:percent': 'rounded bg-primary h-full transition-width duration-200',
    'circle:percent': '',
    label: 'w-12 text-right',
  },
  qrcode_cn: {
    box: 'mx-auto flex rounded-xl',
  },
  radio_cn: {
    box: 'flex items-center text-sm',
    disabled: 'cursor-not-allowed text-disabled-text border-bdr-disabled',
    label: 'mr-5 ml-2.5',
    value: 'relative w-5 h-5 border-2 rounded-full transition-colors duration-200',
    'value:disabled': 'border-bdr-disabled hover:border-bdr-disabled bg-disabled',
    'value:hover': 'border-split hover:border-ipt-hover focus-within:border-ipt-focus  focus-within:hover:border-ipt-focus',
    'value:checked':
      'border-ipt-focus bg-transparent animate-checked-animate after:w-[55.55%] after:h-[55.55%] after:absolute after:bg-ipt-focus after:rounded-full after:translate-x-2/5 after:translate-y-2/5',
    radio: 'absolute z-1 inset-0 w-full h-full opacity-0 pointer-events-none peer',
  },
  scrollbox_cn: {
    box: 'flex-1 overflow-x-hidden overflow-y-auto',
    more: 'text-mini text-primary flex items-center justify-center',
    loading: {
      'box:spinner': 'relative inline-block w-4 h-4 max-h-full max-w-full align-middle steps-12 animate-rotate-0-360',
      'child:spinner': 'absolute top-0 left-0 w-full h-full text-gray before:block before:w-0.5 before:h-1/4 before:bg-current before:rounded-2/5 before:mx-auto before:my-0 spinner',
    },
  },
  group_cn: {
    box: 'w-full h-full flex item-center',
    item: 'flex item-center',
    'item:x': 'mr-5 last:m-0',
    'item:y': 'block mb-2.5',
  },
  select_cn: {
    box: 'relative',
    input: {
      box: 'flex items-center relative transition-border-bg-color duration-300',
    },
    'input:expand': '',
    'input:retract': '',
    suffix: 'text-icon text-base transition-all duration-300',
    'suffix:expand': 'rotate-180',
    'suffix:retract': 'rotate-0',
    value: 'absolute top-0.5 bottom-0.5 flex items-center max-w-full pointer-events-none z-1',
    'value:expand': '',
    'value:retract': '',
    'value:mini': 'px-2 text-xs',
    'value:small': 'px-3 text-sm',
    'value:normal': 'px-3 text-base',
    'value:large': 'px-4 text-lg',
    dropwrap: 'relative w-full h-0',
    dropdown: 'absolute cursor-default left-0 z-100 w-full bg-ipt-bg top-0 text-primary-text overflow-hidden transition-all ease-in-out duration-300 ease-in-out border-x border-b border-ipt-focus',
    'dropdown:expand': 'max-h-64 shadow-md',
    'dropdown:retract': 'max-h-0 shadow-none invisible',
    options: 'max-h-64 transition-transform transition-opacity duration-200 overflow-x-hidden overflow-y-auto',
    'options:expand': 'opacity-100 translate-y-0 delay-200',
    'options:retract': 'opacity-0 translate-y-4 delay-100',
    option: 'border-b border-split cursor-pointer transition-all duration-250 flex items-center justify-between text-left hover:bg-label last:border-0',
    'option:active': 'bg-ipt-focus font-bold',
    'option:mini': 'py-0 px-2.5',
    'option:small': 'py-1 px-2.5',
    'option:normal': 'py-2 px-2.5',
    'option:large': 'py-2.5 px-2.5',
    optiontext: '',
    selectedicon: 'text-ipt-focus',
    empty: 'flex items-center justify-center py-1',
    selected: '',
    'selected:mul': '',
    'selected:sin': '',
  },
  skeleton_cn: {
    card: 'relative overflow-hidden w-full h-40 mb-2.5 rounded bg-split transition-colors duration-200',
    animation: 'after:top-0 after:left-0 after:absolute after:w-full after:h-full after:z-1 after:transition-colors after:duration-200 after:animate-skeleton after:bg-skeleton',
    avatar: 'relative overflow-hidden w-8 h-8 mr-2.5 rounded-full bg-split transition-colors duration-200',
    rows: 'relative overflow-hidden h-3 mb-2.5 rounded bg-split transition-colors duration-200',
  },
  switch_cn: {
    box: 'inline-flex items-center',
    'label:left': 'mr-2.5',
    'label:right': 'ml-2.5',
    'label:error': 'text-error',
    value: 'relative border-0 outline-none',
    'value:error': 'bg-error',
    'value:disabled': 'cursor-not-allowed opacity-60',
    'value:nodisabled': 'cursor-pointer',
    track: 'flex items-center justify-center transition-all transition-filter duration-300 rounded-full opacity-80',
    'track:large': 'w-12 h-6',
    'track:large:active': 'bg-ipt-focus',
    'track:large:noactive': 'bg-label',
    'track:normal': 'w-10 h-5',
    'track:normal:active': 'bg-ipt-focus',
    'track:normal:noactive': 'bg-label',
    'track:small': 'w-8 h-4',
    'track:small:active': 'bg-ipt-focus',
    'track:small:noactive': 'bg-label',
    'track:mini': 'w-6 h-3',
    'track:mini:active': 'bg-ipt-focus',
    'track:mini:noactive': 'bg-label',
    slider: 'bg-white transition-all duration-300 rounded-full absolute scale-85 top-0',
    'slider:large': 'w-6 h-6',
    'slider:large:active': 'left-1/2',
    'slider:large:noactive': 'left-0',
    'slider:normal': 'w-5 h-5',
    'slider:normal:active': 'left-1/2',
    'slider:normal:noactive': 'left-0',
    'slider:small': 'w-4 h-4',
    'slider:small:active': 'left-1/2',
    'slider:small:noactive': 'left-0',
    'slider:mini': 'w-3 h-3',
    'slider:mini:active': 'left-1/2',
    'slider:mini:noactive': 'left-0',
  },
  table_cn: {
    box: 'flex flex-col w-full h-full',
    table: 'w-full table border-collapse table-fixed',
    header: 'table-header-group text-base text-primary-text bg-table-header',
    tbody: 'flex-1 overflow-auto border-b border-split',
    'tr:header': '',
    body: 'table-row-group text-primary-text text-sm',
    'tr:body': 'hover:bg-primary-hover',
    footer: 'table-footer-group text-desc text-xs',
    'tr:footer': '',
    tr: 'table-row cursor-pointer',
    td: 'table-cell px-3 py-2.5 border-split',
    'td:xy': 'border',
    'td:x': 'border-x',
    'td:y': 'border-y',
    'td:xy:scroll': 'border last:border-r-transparent',
    'td:x:scroll': 'border-x last:border-r-transparent',
    'td:y:scroll': 'border-y',
    'td:xy:first:body': 'border-x border-b border-t-0',
    'td:y:first:body': 'border-b border-t-0',
    'td:xy:last:body': 'border-x border-t border-b-0',
    'td:y:last:body': 'border-t border-b-0',
    'td:xy:scroll:first:body': 'border-x border-b border-t-0 last:border-r-transparent',
    'td:y:scroll:first:body': 'border-b border-t-0',
    'td:xy:scroll:last:body': 'border-x border-t border-b-0 last:border-r-transparent',
    'td:y:scroll:last:body': 'border-t border-b-0',
    'td:align:l': 'text-left',
    'td:align:c': 'text-center',
    'td:align:r': 'text-right',
    'td:fixed': 'sticky z-2',
    'td:cover': 'table-cell w-1 right-0',
    'td:cover:xy': 'border-r border-y border-split',
    'td:cover:x': 'border-r border-split',
    'td:cover:y': 'border-y border-split',
  },
  tabs_cn: {
    box: 'flex w-full overflow-hidden',
    'box:horizontal': 'flex-col',
    'box:vertical': '',
    titles: 'relative text-base flex-nowrap',
    'titles:horizontal': 'flex items-center justify-between overflow-x-auto overflow-y-hidden',
    'titles:vertical': 'flex flex-col overflow-x-hidden overflow-y-auto',
    title: 'text-center transition-all duration-250 z-1 relative overflow-hidden text-nowrap break-keep whitespace-nowrap flex-1-0-auto',
    'title:horizontal': '',
    'title:vertical': '',
    'title:disabled': 'bg-disabled text-disabled-text cursor-not-allowed',
    'title:nodisabled': 'cursor-pointer',
    'title:mini': 'px-1 w-12 h-6',
    'title:small': 'px-2.5 py-1 w-24 h-8',
    'title:normal': 'px-3 py-1.5 w-20 h-9',
    'title:large': 'px-5 py-2.5 w-25 h-10',
    'title:active': 'text-primary',
    indicator: 'absolute bg-primary rounded-3xl transition-left-top duration-250 z-1',
    'indicator:horizontal': 'h-0.5 bottom-0',
    'indicator:vertical': 'w-0.5 left-0',
    content: 'text-sm',
    'content:horizontal': 'w-full whitespace-nowrap',
    'content:vertical': 'flex-1',
    contentitem: 'w-full inline-block align-top',
    'contentitem:horizontal': '',
    'contentitem:vertical': 'h-full',
  },
  tag_cn: {
    box: 'inline-flex text-sm px-1 py-0.5 transition-transform transition-colors duration-200',
    'box:default': 'border border-split text-primary-text bg-default',
    'box:primary': 'bg-primary text-white',
    'box:primary:ghost': 'bg-transparent text-primary border border-primary',
    'box:success': 'bg-success text-white',
    'box:success:ghost': 'bg-transparent text-success border border-success',
    'box:warning': 'bg-warning text-white',
    'box:warning:ghost': 'bg-transparent text-warning border border-warning',
    'box:error': 'bg-error text-white',
    'box:error:ghost': 'bg-transparent text-error border border-error',
    'box:checked': 'bg-transparent transition-all duration-200 text-primary-text cursor-pointer hover:opacity-80',
    show: 'scale-100',
    hiddle: 'scale-0',
    close: 'mx-1 cursor-pointer',
    'checked:active': 'bg-primary text-white',
  },
  taost_cn: {
    box: 'text-center flex items-center mt-2 mx-auto px-4 py-2.5 bg-mask text-white text-sm',
    mask: 'fixed z-1000 top-0 left-0 flex justify-center items-center w-screen h-screen',
    'mask:none': 'pointer-events-none',
    'mask:auto': 'pointer-events-auto',
    'icon:success': 'text-success',
    'icon:warn': 'text-warning',
    'icon:error': 'text-error',
  },
  upload_cn: {
    box: 'outline-none cursor-pointer',
    disabled: 'bg-disabled text-disabled-text cursor-not-allowed',
  },
  scrolly_cn: {
    box: 'flex-1 overflow-hidden h-6',
    list: 'flex flex-col',
    transition: 'transition-all duration-300',
    text: 'cursor-pointer h-6',
  },
  dropdown_cn: {
    box: 'relative',
    dropwrap: 'relative w-full h-0',
    dropdown: 'absolute cursor-default left-0 z-100 w-64 bg-white top-0 text-primary-text overflow-hidden transition-all ease-in-out duration-300 ease-in-out border-x border-b border-primary-ipt',
    'dropdown:expand': 'max-h-80 shadow-md',
    'dropdown:retract': 'max-h-0 shadow-none invisible',
    options: 'max-h-80 transition-transform transition-opacity duration-200 overflow-x-hidden overflow-y-auto',
    'options:expand': 'opacity-100 translate-y-0 delay-200',
    'options:retract': 'opacity-0 translate-y-4 delay-100',
  },
  infinitescroll_cn: {
    box: 'overflow-x-hidden overflow-y-auto h-full',
    'loading:box': 'absolute bottom-2.5 left-0 right-0',
    loading: {
      'box:spinner': 'relative inline-block w-4 h-4 max-h-full max-w-full align-middle steps-12 animate-rotate-0-360 mx-auto',
      'child:spinner': 'absolute top-0 left-0 w-full h-full text-primary before:block before:w-0.5 before:h-1/4 before:bg-current before:rounded-2/5 before:mx-auto before:my-0 spinner',
    },
  },
};
